<template>
  <div style="min-width: 809px">
    <!-- 页面底部有总金额，参考原型 -->
    <div v-if="$route.path == '/storeItem' || $route.path == '/projectAdmin/storeItems'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="日期：">
            <el-date-picker
              @change="chageDate"
              value-format="yyyy-MM-dd"
              v-model="date"
              style="width: 250px"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              placeholder="请选择"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="门店：">
            <el-select
              v-model="paging.store_id"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="消费项目：">
            <el-select
              v-model="paging.project_id"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="消费项目：">
            <el-input v-model="paging.project_name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <!-- <el-form-item label="会员卡类型:">
            <el-select
              v-model="paging.vip_id"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option
                v-for="item in vipList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="支付方式:">
            <el-select
              clearable
              v-model="paging.pay_type"
              placeholder="请选择"
              style="width: 250px"
            >
                <el-option
                v-for="item in payWay"
                :key="item.type"
                :label="item.title"
                :value="item.type">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            class="left-auto"
            icon="el-icon-download"
            @click="exportFile"
            :loading="isExport"
            >导出</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          show-summary
          :summary-method="getTotal"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
          max-height="650"
        >
          <el-table-column label="门店" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.store.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="bill_date" label="日期" min-width="100">
          </el-table-column>
          <el-table-column prop="out_trade_no" label="订单号" min-width="100">
          </el-table-column>
          <!-- <el-table-column prop="bill_date" label="开单日期" min-width="100">
          </el-table-column>
          <el-table-column
            prop="bill_start_time"
            label="开单时间"
            min-width="80"
          >
          </el-table-column> -->
          <el-table-column prop="pay_time" label="买单时间" min-width="100">
          </el-table-column>
          <el-table-column prop="room_number" label="房间编号" min-width="80">
          </el-table-column>
          <!-- <el-table-column prop="vip_title" label="会员卡类型" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.vip_title || "散客" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="vip_no" label="会员卡号" min-width="100">
          </el-table-column> -->
          <el-table-column prop="username" label="会员姓名" min-width="100">
          </el-table-column>
          <el-table-column prop="phone" label="会员手机号" min-width="110">
          </el-table-column>
          <!-- <el-table-column prop="phone" label="会员卡类型" min-width="150">
            <template slot-scope="scope">
               <span>{{scope.row.vip_title ? scope.row.vip_title : '散客'}}</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="orders_payable"
            label="订单总金额（元）"
            min-width="110"
          >
          </el-table-column> -->
          <el-table-column prop="project_name" label="消费项目" min-width="150">
          </el-table-column>
          <el-table-column
            prop="duration"
            label="项目时长（分）"
            min-width="100"
          >
          </el-table-column>
          <el-table-column prop="sale_price" label="价格" min-width="100">
          </el-table-column>
          <el-table-column prop="number" label="数量" min-width="80">
          </el-table-column>
          <el-table-column
            prop="receipts"
            label="实收金额（元）"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="coupon_money"
            label="优惠（元）"
            min-width="140"
          >
            <template slot-scope="scope">
                <div>
                    <span style="letter-spacing: 0.2rem;">赠送金额</span>：{{ Number(scope.row.give||0) }}
                </div>
                <div>
                    <span>优惠券金额：</span>{{scope.row.coupon_money||0}}
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="project_payable"
            label="应收金额（元）"
            min-width="100"
          >
          </el-table-column>
          <el-table-column label="支付方式" min-width="100">
            <template slot-scope="scope">
              {{scope.row.pay_type == 1 ? '余额' : '微信'}}
              <!-- <span
                style="margin: 0 4px"
                v-for="(ele, index) in scope.row.payText"
                :key="index"
                >{{ ele }}</span
              > -->
            </template>
          </el-table-column>
          <!-- <el-table-column label="实体卡券/备注" min-width="154" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-image v-if="scope.row.entity_image" class="image-thumbnail" :src="scope.row.entity_image" fit="cover" :preview-src-list="[scope.row.entity_image]" >
                        </el-image>
                <span v-else-if="scope.row.entity_code">{{scope.row.entity_code}}</span>
                <span v-else>{{ scope.row.pay_remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="收银员">
            <template slot-scope="scope">
              <span>{{ scope.row.reception.name }}</span>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      date: "",
      paging: {
        vip_id: "",
        pay_type: "",
        project_id: "",
        date_start: "", //姓名
        date_end: "", //开始时间
        store_id: "", //结束时间
        project_name: ""
      },
      storeList: [],
      tableData: [],
      projectList: [],
      isExport: false,
      vipList: [],
      payWay:[{
            type:1,
            title:'余额',
            icon:'icon-free',
        },{
            type:2,
            title:'微信',
            icon:'icon-xianjinzichan'
        },]
      // payWay:[{
      //       type:1,
      //       title:'免单支付',
      //       icon:'icon-free',
      //   },{
      //       type:2,
      //       title:'现金结账',
      //       icon:'icon-xianjinzichan'
      //   },{
      //       type:3,
      //       title:'银行卡',
      //       icon:'icon-yinhangqia-xianxing'
      //   },{
      //       type:4,
      //       title:'微信',
      //       icon:'icon-yinhangqia-xianxing'
      //   },{
      //       type:5,
      //       title:'支付宝',
      //       icon:'icon-yinhangqia-xianxing'
      //   },{
      //       type:6,
      //       title:'会员卡余额',
      //       icon:'icon-yue1'
      //   },{
      //       type:16,
      //       title:'大众点评',
      //       icon:'icon-yue1'
      //   },
      //   // {
      //   //     type:7,
      //   //     title:'大众点评（团购）',
      //   //     icon:'icon-tuangou'
      //   // },{
      //   //     type:8,
      //   //     title:'大众点评（预定）',
      //   //     icon:'icon-yuyue'
      //   // },
      //   {
      //       type:9,
      //       title:'口碑',
      //       icon:'icon-koubei'
      //   },{
      //       type:10,
      //       title:'WOW',
      //       icon:'icon-wow'
      //   },{
      //       type:11,
      //       title:'小程序',
      //       icon:'icon-xiaochengxu'
      //   },{
      //       type:12,
      //       title:'实体卡券',
      //       icon:'icon-qiaquan'
      //   },{
      //       type:15,
      //       title:'次卡',
      //       icon:'icon-yingchengka'
      //   },{
      //       type:13,
      //       title:'正大无限卡',
      //       icon:'icon-yingchengka'
      //   },{
      //       type:14,
      //       title:'其他',
      //       icon:'icon-yingchengka'
      //   }]
    };
  },
  async created() {
    if (this.$route.path == "/storeItem" || this.$route.path == "/projectAdmin/storeItems" ) {
      // 获取菜单参数 customize_id
      let menu = JSON.parse(localStorage.getItem('menu'))
      this.uniqueStair = localStorage.getItem('uniqueStair') // 子级
      this.uniqueSublevel = localStorage.getItem('uniqueSublevel') // 父级
      menu.forEach(item => {
        if(item.title === this.uniqueSublevel) {
          localStorage.setItem('customize_id', item.customize_id || '')
        }
      });

      await this.getDate();
      await this.getAllProjectList();
      await this.getAllStoreList();
      await this.handleCurrentChange(1);
      await this.getVipList();
    }
  },
  filters: {},
  methods: {
    // 获取会员卡列表
    async getVipList() {
      let { code, data } = await this.$Http.getVip();
      if (code) {
        let obj = {
          title: "散客",
          id: 0,
        };
        this.vipList = [obj, ...data];
      }
    },
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportStoreProjectAchieve(this.paging);
      this.utils.downloadXlsx(res, "门店项目业绩汇总表");
      this.isExport = false;
    },
    PayText(val) {
      switch (val) {
        case "1":
          val = "免单支付";
          break;
        case "2":
          val = "现金结账";
          break;
        case "3":
          val = "银行卡";
          break;
        case "4":
          val = "微信";
          break;
        case "5":
          val = "支付宝";
          break;
        case "6":
          val = "会员卡余额";
          break;
        case "7":
          val = "大众点评（团购）";
          break;
        case "8":
          val = "大众点评（预定）";
          break;
        case "9":
          val = "口碑";
          break;
        case "10":
          val = "wow";
          break;
        case "11":
          val = "小程序";
          break;
        case "12":
          val = "实体卡券";
          break;
        case "13":
          val = "正大无限卡";
          break;
        case "14":
          val = "其他";
          break;
        case "15":
          val = "次卡";
          break;
      }
      return val;
    },
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      console.log(columns, data);
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        //calcProp 为需要计算的列的prop值的集合
        const calcProp = [
          "orders_payable",
          "number",
          "receipts",
          "coupon_money",
          "project_payable",
        ];
        if (calcProp.includes(column.property)) {
          const values = data.map((item) => Number(item[column.property]));
          console.log(values, "values");
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              console.log(2);

              return prev;
            }
          }, 0);
        }
      });
      let arr = [];
      sums.forEach((ele, i) => {
        if (i != 0 && i != 15) {
          sums[i] = Number(ele).toFixed(2);
        }
        // console.log(ele,"444444444")
        // ele = ele.toFixed(2)
      });
      console.log(sums, "sumssumssumssumssumssumssumssums");
      return sums;
    },

    //   获取当月第一天和当天
    getDate() {
      var date = new Date();
      let date2 = new Date();
      date.setDate(1);
      var dateStart =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      var dateEnd = this.utils.getNowDate(date2, true);
      this.paging.date_start = dateStart;
      this.paging.date_end = dateEnd;
      this.date = [dateStart, dateEnd];
    },
    chageDate(e) {
      this.paging.date_start = e[0];
      this.paging.date_end = e[1];
    },
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore({customize_id: localStorage.getItem('customize_id') || ''});
      if (code) {
        this.storeList = data;
        this.paging.store_id = data[0].id;
      }
    },
    // 获取项目列表
    async getAllProjectList() {
      let { code, data } = await this.$Http.getProject({ is_all: 1 });
      if (code) {
        this.projectList = data;
      }
    },
    async repairGetList() {
      this.loading = true;
      this.paging.customize_id = localStorage.getItem('customize_id') || '' // 菜单customize_id
      let { code, data } = await this.$Http.getStoreProjectAchieve(this.paging);
      this.loading = false;
      if (code) {
        data.forEach((ele) => {
          ele.receipts = Number(
            ele.project_payable * 1 -
              ele.coupon_money * 1 -
              ele.return_money * 1
          ).toFixed(2);
          console.log(
            ele.coupon_money,
            ele.return_money,
            ele.project_payable,
            ele.receipts
          );
        });

        let arr = [
          "免单支付",
          "现金",
          "银行卡",
          "微信",
          "支付宝",
          "会员卡余额",
          "大众点评（团购)",
          "大众点评（预定）",
          "口碑",
          "WOW",
          "小程序",
          "实体卡券",
          "正大无限卡",
          "其他",
          "次卡",
          "大众点评"
        ];
        // data.forEach((ele) => {
        //   ele.pay_type = String(ele.pay_type).split(",");
        //   let pay = [];
        //   ele.pay_type.forEach((list, index) => {
        //     pay.push(arr[list * 1 - 1]);
        //   });
        //   ele.payText = pay;
        // });
        this.tableData = data;
        console.log(this.tableData, "this.tableData");
      }
    },
    reset() {
      this.paging.project_id = "";
      this.paging.project_name = "";
      this.paging.store_id = this.storeList[0].id;
      this.getDate();
      this.getAllProjectList();
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.repairGetList();
    },
  },
};
</script>


<style lang="scss" scoped>
::v-deep {
  .el-table {
    position: relative;
    overflow: inherit;
  }
  .el-table__footer-wrapper {
    background: #f5f7fa;
    position: absolute;
    top: -50px;
  }
  .el-table__fixed-footer-wrapper tbody td {
    position: absolute;
  }
}
.operation-box {
  margin-bottom: 70px;
}
.image-thumbnail {
  width: 130px;
  height: 130px;
}

.operation-box {
  display: flex;
  justify-content: flex-end;
}
</style>